<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="$bodyTitle.icon"></i>
            <span>{{ $bodyTitle.description }}</span>
        </h1>
        <div class="line10"></div>
        <div class="body-main">
            <form class="randomString" @submit.prevent="randomString">
                <div class="panel">
                    <div class="btns">
                        <div class="btn" :class="{active:number}" @click="number = !number">
                            <div class="title">数字</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:lettersLower}" @click="lettersLower = !lettersLower">
                            <div class="title">小写字母</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:lettersUpper}" @click="lettersUpper = !lettersUpper">
                            <div class="title">大写字母</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:symbol}" @click="symbol = !symbol">
                            <div class="title">特殊字符</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:unique}" @click="unique = !unique">
                            <div class="title">字符排重</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                    </div>
                    <div class="input" v-if="symbol">
                        <div class="title">特殊字符</div>
                        <input type="text" v-model="symbolChars">
                        <tips v-if="symbolCharsTmp !== symbolChars" class="icon" :tip="`还原字符`" :direction="'top'">
                            <div @click="resetSymbol" class="appfont app-convert"></div>
                        </tips>
                    </div>
                    <div class="input">
                        <div class="title">密码长度</div>
                        <input type="text" v-model="length">
                    </div>
                    <div class="input">
                        <div class="title">生成数量</div>
                        <input type="text" v-model="times">
                    </div>
                </div>

                <button class="generateBtn" type="submit">
                    <i class="icon appfont app-convert2"></i>
                    <span>生成字符串</span>
                </button>

                <div class="output" @click="$copy(result)">
                    <tips class="tips" :tip="`点击复制`" :direction="'top'">
                        <textarea readonly spellcheck="false" v-model="result" placeholder="待生成"></textarea>
                        <i class="copy appfont app-copy"></i>
                    </tips>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import _ from 'lodash';
import kit from '../../electron/helper/kit';

/**
 * 预设生成字符
 * @type {{symbol: string, number: string, letters: string}}
 */
const Chars = {
    symbol : '~!@#$%^&*()_+',
    number : '1234567890',
    letters: 'abcdefghijklmnopqrstuvwxyz'
};

export default {
    name: 'kit_randomString',
    data () {
        return {
            /*开启数字*/
            number: true,

            /*开启小写字母*/
            lettersLower: true,

            /*开启大写字母*/
            lettersUpper: true,

            /*开启符号*/
            symbol: false,

            /*设置特殊符号*/
            symbolChars: Chars.symbol,

            /*设置特殊符号（缓存）*/
            symbolCharsTmp: Chars.symbol,

            /*是否排重*/
            unique: false,

            /*生成长度*/
            length: 32,

            /*生成次数*/
            times: 10,

            /*生成结果*/
            result: ''
        };
    },
    watch  : {
        length (val) {
            this.length = Math.min(kit.toInt(val), 64);
        },
        times (val) {
            this.times = Math.min(kit.toInt(val), 100);
        }
    },
    methods: {

        /*还原预设特殊符号*/
        resetSymbol () {
            this.symbolChars = Chars.symbol;
        },

        /*随机字符串*/
        randomString () {
            let number       = Chars.number;
            let lettersLower = Chars.letters;
            let lettersUpper = Chars.letters.toUpperCase();

            /*待生成的字符串*/
            let tmpChars = '';

            /*开启数字*/
            if (this.number === true) {
                tmpChars += number;
            }

            /*开启小写字母*/
            if (this.lettersLower === true) {
                tmpChars += lettersLower;
            }

            /*开启大写字母*/
            if (this.lettersUpper === true) {
                tmpChars += lettersUpper;
            }

            /*开启特殊字符*/
            if (this.symbol === true) {
                tmpChars += this.symbolChars;
            }

            /*待生成字符串长度*/
            let charsLength = tmpChars.toString().length;

            /*待生成字符串为空*/
            if (charsLength <= 0) {
                this.$alert('未设置可生成的字符串');
                return;
            }

            /*开启了排重但是待生成的字符不足以生成*/
            if (this.unique === true && charsLength < this.length) {
                this.$alert('开启排重后，待生成字符不足以生成指定长度的字符串');
                return;
            }

            /*生成一个随机字符，支持排重*/
            let randomOne = (res, chars, len, unique) => {
                /*随机单个字符*/
                let char = chars.toString()[_.random(0, len - 1)];

                /*排重*/
                if (unique === true && _.includes(res, char)) {
                    return randomOne(res, chars, len, unique);
                }
                return char;
            };

            /*结果字符串（全部）*/
            let allChars = [];
            for (let i = 0; i < this.times; i++) {
                /*结果字符串（单次）*/
                let resChars = '';
                for (let j = 0; j < this.length; j++) {
                    let char = randomOne(resChars, tmpChars, charsLength, this.unique);
                    resChars += char;
                }
                allChars.push(resChars);
            }

            /*生成结果*/
            this.result = allChars.join('\n');
        }
    }
};
</script>

<style scoped lang="less">
.randomString {
    @-body-width   : 100%;
    display        : flex;
    flex-direction : column;
    height         : calc(~"100vh - 125px");

    .panel {
        width       : @-body-width;
        flex-grow   : 0;
        flex-shrink : 0;

        .btns {
            display       : flex;
            margin-bottom : 10px;

            .btn {
                height                : 40px;
                background            : rgba(255, 255, 255, 0.1);
                flex                  : auto;
                margin-right          : 10px;
                -webkit-border-radius : 5px;
                -moz-border-radius    : 5px;
                border-radius         : 5px;
                display               : flex;
                align-items           : center;
                cursor                : pointer;

                &.active {
                    background : fade(@green, 20%);

                    .icon {
                        color : @green;
                    }
                }

                &:last-child {
                    margin-right : 0;
                }

                .icon {
                    height          : 40px;
                    width           : 40px;
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                    flex-grow       : 0;
                    flex-shrink     : 0;
                    color           : #888;
                }

                .title {
                    flex-grow   : 1;
                    flex-shrink : 1;
                    margin-left : 20px;
                }
            }
        }

        .input {
            height                : 40px;
            background            : rgba(255, 255, 255, 1);
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            display               : flex;
            align-items           : center;
            cursor                : pointer;
            margin-bottom         : 10px;
            position              : relative;

            .icon {
                position        : absolute;
                top             : 0;
                right           : 0;
                height          : 40px;
                width           : 40px;
                display         : flex;
                align-items     : center;
                justify-content : center;
                z-index         : 100;
                color           : #999;

                & > div {
                    width           : 100%;
                    height          : 100%;
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                }

                &:hover {
                    color : @blue;
                }
            }

            .title {
                margin-left : 20px;
                width       : 70px;
                flex-grow   : 0;
                flex-shrink : 0;
                color       : #000;
            }

            input {
                border                : 0;
                height                : 40px;
                flex-grow             : 1;
                flex-shrink           : 1;
                -webkit-border-radius : 6px;
                -moz-border-radius    : 6px;
                border-radius         : 6px;
                background            : none;
                color                 : #000;
                text-align            : center;
                margin-right          : 90px;
            }
        }
    }

    .generateBtn {
        flex-grow             : 0;
        flex-shrink           : 0;
        display               : flex;
        align-items           : center;
        justify-content       : center;
        -webkit-border-radius : 5px;
        -moz-border-radius    : 5px;
        border-radius         : 5px;
        background            : @blue;
        width                 : @-body-width;
        height                : 40px;
        margin-bottom         : 20px;
        cursor                : pointer;
        border                : 0;
        color                 : #fff;

        .icon {
            margin-right    : 6px;
            display         : flex;
            height          : 40px;
            align-items     : center;
            justify-content : center;
            position        : relative;
            top             : 1px;
        }

        span {
            font-size       : 16px;
            display         : flex;
            height          : 40px;
            align-items     : center;
            justify-content : center;
        }
    }

    .output {
        flex-grow   : 1;
        flex-shrink : 1;
        width       : @-body-width;
        position    : relative;

        .copy {
            position        : absolute;
            height          : 50px;
            width           : 50px;
            display         : flex;
            align-items     : center;
            justify-content : center;
            top             : 0;
            right           : 0;
            z-index         : 100;
            color           : rgba(255, 255, 255, 0.5);

            &:hover {
                color : @blue;
            }
        }

        .tips {
            width  : 100%;
            height : 100%;
            cursor : pointer;
        }

        textarea {
            width                 : 100%;
            height                : 100%;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            padding               : 10px;
            font-size             : 18px;
            text-align            : center;
            border                : 0;
            background            : #333;
            color                 : #fff;
            cursor                : pointer;

            &::-webkit-input-placeholder {
                font-size : 14px;
            }
        }
    }
}
</style>
